<!DOCTYPE html>
<html>
	<head>	
		<meta charset="utf-8">
		<title>圣诞快乐</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
		
		<style type="text/css">
			
			body * {
				text-shadow: none!important;
			}
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				min-height: 100%;
				font-family: Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
				line-height: 1.231;
				-webkit-touch-callout: none;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-box-align: stretch;
				position: fixed;
				-webkit-text-size-adjust: 100%!important;
				-ms-text-size-adjust: 100%!important;
			}
			.main{
				width: 100%;
				height: 100%;
				margin: 0 auto;
				position: relative;
			}
			.nr{
				background:url(img/bgb.gif);
				background-size: cover;
			}
			//背景音乐btn
			.bgm-btn-wraper, .bgm-btn-wraper .bgm-btn {
				position: absolute;
				z-index: 200;
				width: 30px;
				height: 30px;
			}
			.bgm-btn-wraper {
				right: 20px;
				top: 20px;
				display: block;
			}
			.bgm-btn-wraper .bgm-btn .rotate {
				-webkit-animation: rotating 1.2s linear infinite;
				animation: rotating 1.2s linear infinite;
			}
			.bgm-btn-wraper .bgm-btn {
				right: 0;
				top: 0;
				border-radius: 15px;
				background-image: url(img/bgmBtn-fbd2dc.svg);
				background-size: contain;
				background-repeat: no-repeat;
				
			}
			.start{
				-webkit-animation:run 3s linear 0.1s infinite;
				animation:run 3s linear 0.1s infinite;
			}
			.pause{
				-webkit-animation-play-state: paused;
				animation-play-state: paused;
			}
			.bgm-btn-wraper, .bgm-btn-wraper .bgm-btn {
				position: absolute;
				z-index: 200;
				width: 30px;
				height: 30px;
			}
			audio {
				width: 300px;
				height: 54px;
			}
			
			
			.tpwraper{
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 1;
			}
			.fzdiv{
				text-align: center;
				position: relative;
				top: 13%;
			}
			.fzdiv img{
				width: 94%;
				animation: 1s ease 0.3s 1 normal both running fadeInDown;
			}
			.center{
				text-align: center;
			}
			.wzwraper{
				z-index: 10;
				top: 2%;
				position: relative;
			}
			.wzwraper img{
				width: 94%;
			}
			.hbdiv{
				 animation: 1s ease 0.6s 1 normal both running puffIn;
			}
			.hdiv{
				
				float: right;
				position: absolute;
				right: 7%;
				top: -1%;
			}
			.hdiv .hua img{
				animation: 1s ease 0.5s 1 normal both running fadeInRight;
				transform: rotateZ(16deg);
				float: right;
				-webkit-animation: 1s ease 0.5s 1 normal both running fadeInRight;
			}
			
			.hdiv img{
				width: 41.5%;
			}
			.city{
				background-image: url(img/5o_1b.png);
				background-size: 100%;
				background-repeat: no-repeat;
				margin-top: -10%;
			}
			.city img{
				width: 94%;
				transform: rotateY(180deg);
				position: relative;
				left: -1%;
				margin-top: -2%;
				animation: 1.2s ease 1.2s 1 normal both running fadeInLeft;
			}
			
			
			.sdzt{
				text-align: center;
				position: relative;
				margin-top: 9%;
				left: -9%;
				top: -350px;
				
			}
			.sdzt img{
				width: 61.5%;
				position: relative;
				left: 9%;
			}
			.mz{
			    position: absolute;
			}
			.mz .one {
				width: 25%;
				float: left;
				text-align: center;
				position: relative;
				top: -310px;
				left: 18%;
			}
			.mz .two {
				width: 25%;
				float: left;
				text-align: center;
				position: relative;
				top: -310px;
				left: 13%;
			}
			.mz .three {
				width: 25%;
				float: right;
				text-align: center;
				position: relative;
				top: -310px;
				left: -19%;
			}
			.mz img{
				width: 66%;
			}
			.route{
				animation: rotating 1.2s linear infinite;
			}
			
		</style>
		<link rel="stylesheet" type="text/css" href="css/keyframs.css">
	</head>
	<body style="padding:0px;">
		<div class="main">
			<div class="nr" style="position: fixed; width: 100%; height: 100%;">
				<!-- 背景音乐 -->
				<div class="bgm-btn-wraper">
					<div id="bgm-pic" class="bgm-btn start">
						<audio id="audio" loop src="audio/yq0KXFZep9uAI7cUAAbaOiBFvzA204.mp3" autoplay preload></audio>
					</div>
				</div>
				<!-- 图片start -->
				<div class="tpwraper">
					<div class="fzdiv">
						<img src="img/1o_1b.png" />
					</div>
					<div class="wzwraper">
						<div class="hbdiv">
							<img src="img/3o_1b.png" />
						</div>
						<div class="city">
							<!--<img src="img/5o_1b.png" /> -->
							<a href="xllmg.html">
								<img src="img/6o_1b.png" />
							</a>
						</div>
					<div>
					<div class="hdiv">
						<div class="hua">
							<img src="img/2o_1bhua.png" />
						</div>
						<div class="sdzf">
							<div class="mz">
								<div id="xiao" class="one">
									<img src="img/xiao.png" />
								</div>
								<div id="two" class="two">
									<img id="li1" src="img/li.png" />
								</div>
								<div id="three" class="three">
									<img id="li2" src="img/li.png" />
								</div>
							</div>
							<div id="sdkl" class="sdzt">
								<img src="img/sdzi4sx.png" />
							</div>
							
						</div>
						
					</div>
				</div>
			</div>
		</div>
	
	
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/zf.js"></script>
	<script type="text/javascript">
		var interval = null;
		// (function($){
			$.fn.snow = function(options){
			var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9998', 'top': '-50px'}).html('&#10052;'),
			documentHeight 	= $(document).height(),
			documentWidth	= $(document).width(),
			defaults = {
				minSize		: 10,
				maxSize		: 20,
				newOn		: 1000,
				flakeColor	: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
			},
			options	= $.extend({}, defaults, options);
			interval= setInterval( function(){
			var startPositionLeft = Math.random() * documentWidth - 50,
			startOpacity = 0.5 + Math.random(),
			sizeFlake = options.minSize + Math.random() * options.maxSize,
			endPositionTop = documentHeight - 200,
			endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
			durationFall = documentHeight * 10 + Math.random() * 5000;
			$flake.clone().appendTo('body').css({
				left: startPositionLeft,
				opacity: startOpacity,
				'font-size': sizeFlake,
				color: options.flakeColor
			}).animate({
				top: endPositionTop,
				left: endPositionLeft,
				opacity: 0.2
			},durationFall,'linear',function(){
				$(this).remove()
			});
			}, options.newOn);
		    };
		// })(jQuery);
		function startSnows(){
		    $.fn.snow({ 
			    minSize: 5, /* 定义雪花最小尺寸 */
			    maxSize: 40,/* 定义雪花最大尺寸 */
			    newOn: 310  /* 定义密集程度，数字越小越密集 */
		    });
		};

		//用于暂停下雪
		function endsnow(){
			clearInterval(interval);
			interval = null;
		};
	</script>
</html> 